<script setup>
import QuestionApis from '@/apis/question.js'
import {ElMessage} from "element-plus";


const dialogVisible = ref(false)
const myForm = ref(null)
const formData = ref({
  questionType: '',
  questionDescription: '',
  contactInfo: ''
})
const rules = ref({
  questionType: [{
    required: true,
    message: '请选择问题类型',
    trigger: 'change'
  }],
  questionDescription: [{
    required: true,
    message: '请输入问题描述',
    trigger: 'blur'
  }],
})
const options = [
  {
    value: 'bug',
    label: 'bug问题'
  },
  {
    value: 'normal',
    label: '普通建议'
  },
]

function openDialog() {
  dialogVisible.value = true
}

function submit() {
  myForm.value.validate((valid, fields) => {
    if (!valid) return;
    QuestionApis.submitSuggestion({
      ...formData.value
    }).then(res=>{
      ElMessage({
        type:'success',
        message:'已收到您的意见，我们会认真考虑'
      })
    })
  })
}

function close() {
  // dialogVisible.value=false
  myForm.value.resetFields(['questionType',
    'questionDescription',
    'contactInfo'])

}

defineExpose({
  openDialog
})
</script>

<template>
  <!--  提交表单-->
  <el-dialog v-model="dialogVisible"
             title="您的意见反馈"
             width="500"
             @close="close"
  >
    <div class="suggest-container">
      <el-form ref="myForm" label-width="120px" :model="formData" :rules="rules">
        <el-form-item label="问题类型" prop="questionType">
          <el-select v-model="formData.questionType" placeholder="请选择问题类型">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述" prop="questionDescription">
          <el-input type="textarea"
                    placeholder="请输入内容"
                    v-model="formData.questionDescription"
                    :rows="5"
                    resize="none"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactInfo">
          <el-input type="text" v-model="formData.contactInfo"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submit" round>提交</el-button>
    </div>

  </el-dialog>
</template>

<style scoped>
.suggest-container {
  width: 100%;
  display: flex;
  flex-direction: column;

  gap: 32px;
  padding: 16px;
}
</style>